/**
 * 全局共用钩子方法(逻辑)
 */
import { ref, onUnmounted, computed } from 'vue'
import dayjs from 'dayjs'
// 导入监控元素是否进入可视区函数
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
/**
 *
 * @param {*} apiFn 请求方法（callback回调函数）
 * @returns
 */
export const useObserver = (apiFn) => {
  // 监控元素是否进入可视区
  /**
     * 结论：
     * 1. 通过回调函数的isIntersecting判断组件或元素是否进入可视区
     * 2. 监控是一直在执行（第一次进入的时候，发请求（只发一次））
     */
  const target = ref(null)
  const { stop } = useIntersectionObserver(
    target,
    ([{ isIntersecting }]) => {
      // isIntersecting 判断组件或元素是否进入可视区=》true 进入 | false 离开
      console.log('判断组件或元素是否进入可视区:', isIntersecting)
      if (isIntersecting) {
        console.log('进入可视区了，发一次请求，达到目的，就关闭监控')
        apiFn()
        // 关闭监控
        stop()
      }
    },
    {
      // 露头之后立马执行
      threshold: 0
    }
  )
  return { target }
}

/**
 *
 * @param {*} time s 倒计时时间（60）
 * 怎么支持把秒转成分秒形式 显示倒计时
 */
export function useCountDown (time) {
  /**
     * pause 停止
     * resume 开始
     */
  const count = ref(0)
  // 计算count的分秒时间
  const countTxt = computed(() => {
    return dayjs.unix(count.value).format('mm分ss秒')
  })
  const { pause, resume } = useIntervalFn(() => {
    /* your function */
    // console.log(count.value)
    count.value--
    if (count.value <= 0) {
      pause()
    }
  }, 1000, { immediate: false })

  const start = (_time) => {
    // 每次开始判断如果是0，重新开始
    if (count.value === 0) {
      count.value = time || _time
    }
    // 开始倒计时
    resume()
  }
  // 组件销毁时，清除定时器
  onUnmounted(() => {
    pause()
  })
  // 暴露=》数据和方法
  return { count, countTxt, start, pause }
}
